<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比赛管理 - 排球队</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .matches-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .page-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 10px;
        }
        
        .page-subtitle {
            color: #666;
            font-size: 1.1rem;
        }
        
        .tabs-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            overflow: hidden;
        }
        
        .tabs-header {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
        
        .tab-button {
            flex: 1;
            padding: 15px 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: #666;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .tab-button.active {
            background: white;
            color: #667eea;
            font-weight: bold;
        }
        
        .tab-button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: #667eea;
        }
        
        .tab-content {
            padding: 30px;
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .filters-section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .filters-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .filter-label {
            font-weight: bold;
            color: #333;
            font-size: 0.9rem;
        }
        
        .filter-select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
            min-width: 120px;
        }
        
        .search-box {
            flex: 1;
            min-width: 200px;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        .matches-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .match-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        
        .match-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .match-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .match-type {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .match-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .match-date {
            font-size: 1rem;
            opacity: 0.9;
        }
        
        .match-content {
            padding: 20px;
        }
        
        .teams-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .team {
            text-align: center;
            flex: 1;
        }
        
        .team-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .team-score {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
        }
        
        .vs-divider {
            font-size: 1.5rem;
            color: #666;
            margin: 0 20px;
        }
        
        .match-info {
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
        
        .info-label {
            color: #666;
        }
        
        .info-value {
            color: #333;
            font-weight: 500;
        }
        
        .match-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .status-upcoming {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .status-ongoing {
            background: #fff3e0;
            color: #f57c00;
        }
        
        .status-completed {
            background: #e8f5e8;
            color: #388e3c;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
        }
        
        .page-btn {
            padding: 10px 15px;
            border: 1px solid #ddd;
            background: white;
            color: #333;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .page-btn:hover,
        .page-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .stats-summary {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }
        
        .summary-stat {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .summary-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .summary-label {
            color: #666;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>排球队管理系统</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li>
                    <a href="../../index_qiu.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="../about/about.html">
                        <i class="fas fa-info-circle"></i>
                        球队介绍
                    </a>
                </li>
                <li>
                    <a href="../players/list.html">
                        <i class="fas fa-users"></i>
                        队员信息
                    </a>
                </li>
                <li class="active">
                    <a href="matches.html">
                        <i class="fas fa-trophy"></i>
                        比赛管理
                    </a>
                </li>
                <li>
                    <a href="../training/training.html">
                        <i class="fas fa-dumbbell"></i>
                        训练安排
                    </a>
                </li>
                <li>
                    <a href="../knowledge/index.html">
                        <i class="fas fa-book"></i>
                        排球知识
                    </a>
                </li>
                <li>
                    <a href="../notifications/detail.html">
                        <i class="fas fa-bell"></i>
                        通知管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>排球队管理系统</h1>
            </div>
            <div class="switch-page">
                <button class="btn btn-secondary" onclick="switchToMainPage()">
                    <i class="fas fa-exchange-alt"></i> 流光小队
                </button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="matches-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1 class="page-title">比赛管理</h1>
                    <p class="page-subtitle">查看和管理球队的所有比赛信息</p>
                </div>

                <!-- 统计摘要 -->
                <div class="stats-summary">
                    <div class="stats-grid">
                        <div class="summary-stat">
                            <div class="summary-number">156</div>
                            <div class="summary-label">总比赛数</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">89</div>
                            <div class="summary-label">胜利场次</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">67</div>
                            <div class="summary-label">失败场次</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">57.1%</div>
                            <div class="summary-label">胜率</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">15</div>
                            <div class="summary-label">即将比赛</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">3</div>
                            <div class="summary-label">进行中</div>
                        </div>
                    </div>
                </div>

                <!-- 标签页 -->
                <div class="tabs-container">
                    <div class="tabs-header">
                        <button class="tab-button active" onclick="showTab('upcoming')">即将比赛</button>
                        <button class="tab-button" onclick="showTab('ongoing')">进行中</button>
                        <button class="tab-button" onclick="showTab('completed')">已完成</button>
                    </div>

                    <!-- 即将比赛 -->
                    <div id="upcoming" class="tab-content active">
                        <div class="filters-section">
                            <div class="filters-row">
                                <div class="search-box">
                                    <input type="text" class="search-input" placeholder="搜索比赛..." id="upcomingSearch">
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">比赛类型</label>
                                    <select class="filter-select" id="upcomingTypeFilter">
                                        <option value="">全部类型</option>
                                        <option value="联赛">联赛</option>
                                        <option value="友谊赛">友谊赛</option>
                                        <option value="锦标赛">锦标赛</option>
                                    </select>
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">时间范围</label>
                                    <select class="filter-select" id="upcomingTimeFilter">
                                        <option value="">全部时间</option>
                                        <option value="week">本周</option>
                                        <option value="month">本月</option>
                                        <option value="quarter">本季度</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="matches-grid" id="upcomingMatches">
                            <!-- 即将比赛卡片将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 进行中 -->
                    <div id="ongoing" class="tab-content">
                        <div class="matches-grid" id="ongoingMatches">
                            <!-- 进行中比赛卡片将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 已完成 -->
                    <div id="completed" class="tab-content">
                        <div class="filters-section">
                            <div class="filters-row">
                                <div class="search-box">
                                    <input type="text" class="search-input" placeholder="搜索比赛..." id="completedSearch">
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">比赛结果</label>
                                    <select class="filter-select" id="completedResultFilter">
                                        <option value="">全部结果</option>
                                        <option value="win">胜利</option>
                                        <option value="loss">失败</option>
                                    </select>
                                </div>
                                <div class="filter-group">
                                    <label class="filter-label">时间范围</label>
                                    <select class="filter-select" id="completedTimeFilter">
                                        <option value="">全部时间</option>
                                        <option value="month">本月</option>
                                        <option value="quarter">本季度</option>
                                        <option value="year">本年</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="matches-grid" id="completedMatches">
                            <!-- 已完成比赛卡片将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="page-btn active">1</a>
                    <a href="#" class="page-btn">2</a>
                    <a href="#" class="page-btn">3</a>
                    <a href="#" class="page-btn">下一页</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 比赛数据
        const upcomingMatches = [
            {
                id: 1,
                type: "联赛",
                title: "2024春季联赛第5轮",
                date: "2024-02-15",
                time: "14:00",
                venue: "市体育馆",
                homeTeam: "我们球队",
                awayTeam: "对手A队",
                homeScore: null,
                awayScore: null,
                status: "upcoming"
            },
            {
                id: 2,
                type: "友谊赛",
                title: "与B校友谊赛",
                date: "2024-02-20",
                time: "16:00",
                venue: "B校体育馆",
                homeTeam: "B校球队",
                awayTeam: "我们球队",
                homeScore: null,
                awayScore: null,
                status: "upcoming"
            },
            {
                id: 3,
                type: "锦标赛",
                title: "市级锦标赛半决赛",
                date: "2024-02-25",
                time: "15:30",
                venue: "市体育中心",
                homeTeam: "我们球队",
                awayTeam: "C校球队",
                homeScore: null,
                awayScore: null,
                status: "upcoming"
            }
        ];

        const ongoingMatches = [
            {
                id: 4,
                type: "联赛",
                title: "2024春季联赛第4轮",
                date: "2024-02-10",
                time: "14:00",
                venue: "市体育馆",
                homeTeam: "我们球队",
                awayTeam: "D校球队",
                homeScore: 2,
                awayScore: 1,
                status: "ongoing"
            }
        ];

        const completedMatches = [
            {
                id: 5,
                type: "联赛",
                title: "2024春季联赛第3轮",
                date: "2024-02-05",
                time: "14:00",
                venue: "市体育馆",
                homeTeam: "我们球队",
                awayTeam: "E校球队",
                homeScore: 3,
                awayScore: 1,
                status: "completed",
                result: "win"
            },
            {
                id: 6,
                type: "友谊赛",
                title: "与F校友谊赛",
                date: "2024-02-01",
                time: "16:00",
                venue: "F校体育馆",
                homeTeam: "F校球队",
                awayTeam: "我们球队",
                homeScore: 2,
                awayScore: 3,
                status: "completed",
                result: "win"
            },
            {
                id: 7,
                type: "联赛",
                title: "2024春季联赛第2轮",
                date: "2024-01-30",
                time: "14:00",
                venue: "市体育馆",
                homeTeam: "我们球队",
                awayTeam: "G校球队",
                homeScore: 1,
                awayScore: 3,
                status: "completed",
                result: "loss"
            }
        ];

        // 显示标签页
        function showTab(tabName) {
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签按钮的活跃状态
            document.querySelectorAll('.tab-button').forEach(button => {
                button.classList.remove('active');
            });
            
            // 显示选中的标签页
            document.getElementById(tabName).classList.add('active');
            
            // 添加选中标签按钮的活跃状态
            event.target.classList.add('active');
            
            // 渲染对应数据
            renderMatches(tabName);
        }

        // 渲染比赛卡片
        function renderMatches(tabName) {
            let matches = [];
            let containerId = '';
            
            switch(tabName) {
                case 'upcoming':
                    matches = upcomingMatches;
                    containerId = 'upcomingMatches';
                    break;
                case 'ongoing':
                    matches = ongoingMatches;
                    containerId = 'ongoingMatches';
                    break;
                case 'completed':
                    matches = completedMatches;
                    containerId = 'completedMatches';
                    break;
            }
            
            const container = document.getElementById(containerId);
            container.innerHTML = '';
            
            matches.forEach(match => {
                const card = document.createElement('div');
                card.className = 'match-card';
                card.onclick = () => showMatchDetail(match.id);
                
                const statusText = {
                    'upcoming': '即将开始',
                    'ongoing': '进行中',
                    'completed': '已完成'
                };
                
                const statusClass = {
                    'upcoming': 'status-upcoming',
                    'ongoing': 'status-ongoing',
                    'completed': 'status-completed'
                };
                
                card.innerHTML = `
                    <div class="match-header">
                        <div class="match-type">${match.type}</div>
                        <div class="match-title">${match.title}</div>
                        <div class="match-date">${match.date} ${match.time}</div>
                    </div>
                    <div class="match-content">
                        <div class="match-status ${statusClass[match.status]}">${statusText[match.status]}</div>
                        <div class="teams-section">
                            <div class="team">
                                <div class="team-name">${match.homeTeam}</div>
                                <div class="team-score">${match.homeScore !== null ? match.homeScore : '-'}</div>
                            </div>
                            <div class="vs-divider">VS</div>
                            <div class="team">
                                <div class="team-name">${match.awayTeam}</div>
                                <div class="team-score">${match.awayScore !== null ? match.awayScore : '-'}</div>
                            </div>
                        </div>
                        <div class="match-info">
                            <div class="info-row">
                                <span class="info-label">比赛场地：</span>
                                <span class="info-value">${match.venue}</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">比赛时间：</span>
                                <span class="info-value">${match.date} ${match.time}</span>
                            </div>
                        </div>
                    </div>
                `;
                
                container.appendChild(card);
            });
        }

        // 显示比赛详情
        function showMatchDetail(matchId) {
            alert('比赛详情功能正在开发中，比赛ID：' + matchId);
        }

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile) {
                // 移动端：切换侧边栏显示/隐藏
                sidebar.classList.toggle('open');
            } else {
                // 桌面端：侧边栏始终可见，不需要切换
                console.log('桌面端侧边栏始终可见');
            }
        }

        // 切换页面
        function switchToMainPage() {
            window.location.href = '../../index.html';
        }

        // 窗口大小改变时处理侧边栏状态
        window.addEventListener('resize', function() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (!isMobile) {
                // 桌面端：确保侧边栏可见
                sidebar.classList.remove('open');
            }
        });

        // 初始化页面
        renderMatches('upcoming');
    </script>
</body>
</html> 